<template>
	<div class="content">
		<div class="main">
			<!-- 第一个表格隶属科室 -->
			<div class="mainOne">
				<div class="header">
					<div><span style="font-size: 12px;color: #fff;">隶属科室</span></div>
					<div><el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button></div>
				</div>
				<el-table :data="tableData" border>
					<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name"></el-table-column>
					<!-- fixed -->
					<el-table-column fixed="left" label="行号" type="index" width="50"></el-table-column>
					<!-- edit -->
					<el-table-column fixed="right" label="操作" width="88">
					  <template slot-scope="scope">
						  <div class="editbox" style="text-align: center;">
							<el-button type="text" @click="editFormValue(scope.row)" size="mini">编辑</el-button>
							<el-button type="text" @click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button>
						  </div>
					  </template>
					</el-table-column>
				</el-table>
			</div>

		</div>
		<div class="feet">
			<!-- 新增隶属科室dialog -->
			<addKsDialog ref="OpenksAdd" @addksData="addksData"></addKsDialog>
			<!-- <addygDialog ref="OpenygAdd" @addygData="addygData"></addygDialog> -->
		</div>
	</div>
</template>

<script>
	// selfs / sons
	import addKsDialog from './addKsDialog.vue'
	// import addygDialog from './addygDialog.vue'
	export default {
		components: {
			addKsDialog
		},
		data() {
			return {
				loading:false,
				// title右侧按钮
				headerBtn:[{ add:"add", title:"", type:"text", icon:"el-icon-plus" },{ adit:"adit", title:"", type:"text", icon:"el-icon-edit" }, { del:"del", title:"", type:"text", icon:"el-icon-delete" }],
				tableData:[],
				tableDataNone:[],
				sendToFa:[],
				tableRowsI:[{ name:"员工属性", prop:"label", type:"" }],
				tableRows:[{ name:"科室名称", prop:"deptName", type:"" }],
				sonData:[
					{ks:''},
					{yg:''}
				],
			}
		},

		methods: {
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 打开隶属科室model
						this.$refs.OpenksAdd.OpenaddKsDialogFormVisible();
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						console.log('2')
						break;
				}
			},
			resetForm() {
			    this.tableData = [];
			    
			    // 如果有分页等需要重置
			    if (this.$refs.table) {
			      this.$refs.table.clearSelection();
			    }
			  },
			// 员工性质表格
			handClickYG(i){
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 打开员工性质model
						this.$refs.OpenygAdd.OpenaddygDialogFormVisible();
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			// 随索引删除
			handleDelete(index, row){
				this.tableData.splice(index, 1);
			},
			// 控制科室属性新增model，接收子组件传递过来的值并赋值
			addksData(newVal){
				// console.log(newVal);
				console.log(newVal,'子组件传过来的');
				if(this.tableData.length == 0){
					this.tableData.push(JSON.parse(JSON.stringify(newVal)))
					this.$emit('sonData',this.tableData)
				}else{
					let res = this.tableData.some(i => i.deptId === newVal.deptId && i.deptName === newVal.deptName)
					if(res === true){
						this.$message.error('表格中已存在相同数据，请勿重复添加！')
						this.tableData.push(JSON.parse(JSON.stringify(newVal)))
						this.tableData.pop();
					}else{
						this.tableData.push(JSON.parse(JSON.stringify(newVal)))
						console.log(this.tableData,'this.sendToFathis.sendToFa');
						this.$emit('sonData',this.tableData)
					}
					
				}

			},
			// 控制员工性质新增model，接收子组件传递过来的值并赋值
			addygData(newVal){
				// console.log(newVal);
				this.sendToFa.push(newVal)
				console.log(this.sendToFa,'子组件传过来的');
				this.tableDataNone.push(JSON.parse(JSON.stringify(newVal)))
				this.sonData[1].yg = newVal
				if(this.sonData != {} || this.tableDataNone != []){
					this.$emit('sonData',this.sonData)
				}
			},
			
		},

		//生命周期
		created() {
			
		},

	}
</script>

<style lang="less" scoped>
.content{
	height: 100%;
	width: 100%;
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #007bb0;
		padding: 4px;
	}
	.main{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.mainOne{
			flex: 1;
			height: 100%;
			border: 1px solid #007bb0;
			
		}

	}
}
</style>